import {
  useEffect,
  useState,
  useContext,
  createContext,
  useLayoutEffect,
} from 'react';
import useDebounce from '@/hooks/useDebounce';

const ss = createContext(null);
function SevenTest() {
  const [age, setAge] = useState(16);
  const [isAdult, setIsAdult] = useState(false);
  const ste = useContext(ss);

  const growUp = useDebounce(() => {
    setAge((prev) => prev + 1);
    console.log(age);

    if (age === 17) setIsAdult(true);
  }, 1500);

  useLayoutEffect(() => {}, []);
  return (
    <div>
      {isAdult && <p>Adult</p>}
      <button onClick={growUp}>grow up</button>
      <p>{age}</p>
      <ss.Provider
        value={{
          uuid: 13,
          changeUUid: function (value) {
            this.uuid = value;
            console.log('执行了changeUUid', this);
          },
        }}
      >
        <Son />
      </ss.Provider>
    </div>
  );
}

export default SevenTest;

function Son() {
  const ste = useContext(ss);
  return (
    <div
      onClick={() => {
        console.log('son', ste);
      }}
    >
      Son
      <Gson />
    </div>
  );
}

function Gson() {
  const ste = useContext(ss);
  useEffect(() => {}, []);
  return (
    <div
      onClick={() => {
        ste.uuid = 180;
        console.log(ste);
      }}
    >
      SevenTest{ste.uuid}
    </div>
  );
}
